<!--  -->
<template>
  <div class='authority'>
    <el-button type="primary" v-permissions="'livestock:add'" @click="addPenInPage" style="margin-bottom: 10px;">新增</el-button>
    <el-button type="primary" v-permissions="'livestock:changeRecord'" @click="changeStyRecord" style="margin-bottom: 10px;">转栏记录</el-button>
    <el-button type="primary" v-permissions="'livestock:outRecord'" @click="outStyStock" style="margin-bottom: 10px;">出栏记录</el-button>
    <!-- 查询 -->
    <el-form :inline="true" :model="queryFromStock" class="demo-form-inline">
      <el-form-item label="名字">
        <el-input v-model="queryFromStock.kw" placeholder="请输入品种"></el-input>
      </el-form-item>
      <el-form-item label="牧场">
        <el-select
          v-model="queryFromStock.ranchId"
          placeholder="请选择"
          @change="changeRanchGetPenForQuery"
          >
          <el-option
          v-for="(item,index) in queryFromStock.ranchIdArr"
          :key="index"
          :label="item.name"
          :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="圈棚">
        <el-select
          v-model="queryFromStock.penId"
          placeholder="请选择"
          @change="changeRanchGetStyForQuery"
          >
          <el-option
          v-for="(item,index) in queryFromStock.penIdArr"
          :key="index"
          :label="item.penName"
          :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏舍">
        <el-select
          v-model="queryFromStock.styId"
          placeholder="请选择"
          >
          <el-option
          v-for="(item,index) in queryFromStock.styIdArr"
          :key="index"
          :label="item.styName"
          :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品种">
        <el-select
          v-model="queryFromStock.typeId"
          placeholder="请选择"
          >
          <el-option
          v-for="(item,index) in queryFromStock.typeIdArr"
          :key="index"
          :label="item.name"
          :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryFromStock.status" placeholder="请选择状态">
          <el-option label="在栏" value="1"></el-option>
          <el-option label="未在栏" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSrearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表展示选择 -->
    <el-form :inline="true">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="(item,index) in isShowList" v-model="item.isShow" :label="item.label" :key="index">{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </el-form>
    <div>
      <!-- 列表展示 -->
      <el-table
        :data="getMystock"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="55">
        </el-table-column>
        <el-table-column
          prop="num"
          label="编号"
          v-if="checkList.indexOf('编号') != -1"
          width="100">
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('性别') != -1"
          prop="sex"
          label="性别"
          width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sex === 1 ? '公' : '母' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('出生日期') != -1"
          prop="birthday"
          label="出生日期"
          width="100">
          <template slot-scope="scope">
            <span>{{ timestampToDate(scope.row.birthday) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('异常状态') != -1"
          prop="abnormal"
          label="异常状态"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.abnormal === 0 ? '正常' : '异常' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('状态') != -1"
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.status === 0 ? '未在栏' : '在栏' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('牧场') != -1"
          prop="ranchName"
          label="牧场"
          width="100">
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('圈棚') != -1"
          prop="penName"
          label="圈棚"
          width="100">
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('栏舍') != -1"
          prop="styName"
          label="栏舍"
          width="100">
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('品种') != -1"
          prop="typeName"
          label="品种"
          width="80">
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('耳标名称') != -1"
          prop="tagNum"
          label="耳标名称"
          width="80">
        </el-table-column>
        <el-table-column
          v-if="checkList.indexOf('图片') != -1"
          prop="pic"
          label="图片"
          width="100">
          <template slot-scope="scope">
            <img @click="blowUpImg(scope.row.pic)" :src="scope.row.pic" alt="" style="width: 100px; height: 100px;">
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          >
          <template slot-scope="scope">
            <el-button v-permissions="'livestock:detail'" @click="getLiveStockDetail(scope.row.id)" type="text" size="small">详情</el-button>
            <el-button v-permissions="'livestock:delete'" @click="deletLiveStockDUser(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button v-permissions="'livestock:change'" @click="changeSty(scope.row.id)" type="text" size="small">转栏</el-button>
            <el-button v-permissions="'livestock:out'" @click="outLiveStockFun(scope.row.id)" type="text" size="small">出栏</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!-- 图片放大 -->
       <el-dialog
        :visible.sync="dialogVisibleFroImg"
        width="50%">
        <div>
          <img :src="myDetailImg" alt="" srcset="">
        </div>
      </el-dialog>
      <!-- 详情 -->
      <el-dialog
        title="牲畜详情"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="true"
        width="50%">
        <el-form
          ref="deatilsFrom"
          :model="updateLiveStockDetail"
          :disabled="isDisabled"
          :inline="false"
          class="demo-form-inline"
          label-position="left"
          label-width="auto"
          :rules="updateDetailForStock">
          <div class="filter-container">
            <el-form-item label="编号" prop="num">
              <el-input v-model="updateLiveStockDetail.num" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="updateLiveStockDetail.birthday"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select
                v-model="updateLiveStockDetail.sex"
                placeholder="请选择"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.sexArr"
                :key="index"
                :label="item.name"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="updateLiveStockDetail.status"
                placeholder="请选择"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.statusArr"
                :key="index"
                :label="item.name"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="异常状态" prop="abnormal">
              <el-select
                v-model="updateLiveStockDetail.abnormal"
                placeholder="请选择"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.abnormalArr"
                :key="index"
                :label="item.name"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="牧场" prop="ranchId">
              <el-select
                v-model="updateLiveStockDetail.ranchId"
                placeholder="请选择"
                @change="changeForDetail"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.ranchIdArr"
                :key="index"
                :label="item.name"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="圈棚" prop="penId">
              <el-select
                v-model="updateLiveStockDetail.penId"
                placeholder="请选择"
                @change="changeForDetailInPen"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.penIdArr"
                :key="index"
                :label="item.penName"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="栏舍" prop="styId">
              <el-select
                v-model="updateLiveStockDetail.styId"
                placeholder="请选择"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.styIdArr"
                :key="index"
                :label="item.styName"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="耳标" prop="earTagId">
              <el-select
                v-model="updateLiveStockDetail.earTagId"
                placeholder="请选择"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.earTagIdArr"
                :key="index"
                :label="item.num"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品种" prop="typeId">
              <el-select
                v-model="updateLiveStockDetail.typeId"
                placeholder="请选择"
                >
                <el-option
                v-for="(item,index) in updateLiveStockDetail.typeIdArr"
                :key="index"
                :label="item.name"
                :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item  label="备注" prop="remark">
              <el-input v-model="updateLiveStockDetail.remark"></el-input>
            </el-form-item> -->
            <el-form-item label="图片" prop="picRule">
              <el-upload
                class="upload-demo"
                action="http://api.ruyiqifu.com.cn/"
                :http-request="changeUploadImgFun"
                :on-success="changeHandlePreview"
                :on-remove="ChangeHandleRemove"
                :limit="1"
                accept=".png,.jpg,.jpeg"
                :file-list="fileListDetail"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">一次一张图片,只能上传jpg/png/jpeg文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>

          </div>
        </el-form>
        <div class="buttons">
           <el-button type="primary" v-permissions="'livestock:update'" @click="setConfigUserRole" v-if="isDisabled">修改</el-button>
           <el-button type="primary" @click="submitConfigUser" v-if="!isDisabled">保存</el-button>
           <el-button @click="closeDiaDetail">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog
        title="新增牲畜"
        :visible.sync="addCompany"
        @close="closeDia"
        :close-on-press-escape="true"
        :close-on-click-modal="false"
        width="50%">
        <el-form ref="fromForStockAdd" :model="formForAddLiveStock" :rules="addLiveStockRule" label-width="80px">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="formForAddLiveStock.birthday"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="耳标id" prop="earTagId">
            <el-select
              v-model="formForAddLiveStock.earTagId"
              placeholder="请选择"
              >
              <el-option
              v-for="(item,index) in formForAddLiveStock.earTagIdArr"
              :key="index"
              :label="item.num"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="牧场id" prop="ranchId">
            <el-select
              v-model="formForAddLiveStock.ranchId"
              placeholder="请选择"
              @change="changeRanchGetPen"
              >
              <el-option
              v-for="(item,index) in formForAddLiveStock.ranchIdArr"
              :key="index"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="圈棚id" prop="penId">
            <el-select
              v-model="formForAddLiveStock.penId"
              placeholder="请选择"
              @change="changeRanchGetSty"
              >
              <el-option
              v-for="(item,index) in formForAddLiveStock.penIdArr"
              :key="index"
              :label="item.penName"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="栏舍id" prop="styId">
            <el-select
              v-model="formForAddLiveStock.styId"
              placeholder="请选择"
              >
              <el-option
              v-for="(item,index) in formForAddLiveStock.styIdArr"
              :key="index"
              :label="item.styName"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品种id" prop="typeId">
            <el-select
              v-model="formForAddLiveStock.typeId"
              placeholder="请选择"
              >
              <el-option
              v-for="(item,index) in formForAddLiveStock.typeIdArr"
              :key="index"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="formForAddLiveStock.sex"
              placeholder="请选择"
              >
              <el-option
              v-for="(item,index) in formForAddLiveStock.sexArr"
              :key="index"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formForAddLiveStock.remark"></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="picRule">
            <el-upload
              class="upload-demo"
              action="http://api.ruyiqifu.com.cn/"
              :http-request="uploadImgFun"
              :on-success="handlePreview"
              :on-remove="handleRemove"
              :limit="1"
              accept=".png,.jpg,.jpeg"
              :file-list="fileList"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">一次一张图片,只能上传jpg/png/jpeg文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: center;">
          <el-button type="primary" @click="addMyNewCompany">保存</el-button>
        </div>
      </el-dialog>
      <!-- 转栏 -->
      <el-dialog
        title="转栏"
        :visible.sync="addChangeLive"
        @close="closeDia"
        :close-on-press-escape="true"
        :close-on-click-modal="false"
        width="50%">
        <el-form ref="fromForAddChange" :model="addChangeFrom" :rules="addChangeRule" label-width="80px">
          <el-form-item label="牧场" prop="newRanchId">
            <el-select
              v-model="addChangeFrom.newRanchId"
              placeholder="请选择"
              @change="changeForRecodeRanch"
              >
              <el-option
              v-for="(item,index) in addChangeFrom.newRanchIdArr"
              :key="index"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="圈棚" prop="newPenId">
            <el-select
              v-model="addChangeFrom.newPenId"
              placeholder="请选择"
              @change="changeForRecodePen"
              >
              <el-option
              v-for="(item,index) in addChangeFrom.newPenIdArr"
              :key="index"
              :label="item.penName"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="栏舍" prop="newStyId">
            <el-select
              v-model="addChangeFrom.newStyId"
              placeholder="请选择"
              @change="changeForDetail"
              >
              <el-option
              v-for="(item,index) in addChangeFrom.newStyIdArr"
              :key="index"
              :label="item.styName"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addChangeFrom.remark"></el-input>
          </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: center;">
          <el-button type="primary" @click="sumbitChang">保存</el-button>
        </div>
      </el-dialog>
      <!-- 转栏记录 -->
       <el-dialog
        title="转栏记录"
        :visible.sync="changeRecodeLan"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="true"
        width="50%">
        <el-form :inline="true" :model="changeRecodeQuery" class="demo-form-inline">
          <el-form-item label="编号">
            <el-input v-model="changeRecodeQuery.kw" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSrearchChange">查询</el-button>
            <el-button @click="resetFormChange">重置</el-button>
          </el-form-item>
        </el-form>
          <el-table
          :data="getChangeRecode"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="livestockNum"
            label="编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="oldRanchName"
            label="原牧场"
            width="100">
          </el-table-column>
          <el-table-column
            prop="newRanchName"
            label="现牧场"
            width="100">
          </el-table-column>
          <el-table-column
            prop="oldPenName"
            label="原圈棚"
            width="100">
          </el-table-column>
          <el-table-column
            prop="newPenName"
            label="现圈棚"
            width="100">
          </el-table-column>
          <el-table-column
            prop="oldStyName"
            label="原栏舍"
            width="100">
          </el-table-column>
          <el-table-column
            prop="newStyName"
            label="现栏舍"
            width="100">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="100">
          </el-table-column>
        </el-table>
        <pagination
          class="pagination_container"
          :total="paginationForChange.total"
          :page-sizes="[10, 20, 50, 100]"
          :page.sync="paginationForChange.page"
          :limit.sync="paginationForChange.pageSize"
          @pagination="changeStyRecord"
        />
      </el-dialog>
      <!-- 出栏 -->
       <el-dialog
        title="出栏"
        :visible.sync="outPutLiveStock"
        :close-on-click-modal="false"
        :close-on-press-escape="true"
        @close="closeDia"
        width="50%">
        <el-form ref="fromForOutChange" :model="outLiveStock" :rules="outLiveStockRule" label-width="80px">
          <el-form-item label="购买人" prop="buyer">
            <el-input v-model="outLiveStock.buyer"></el-input>
          </el-form-item>
          <el-form-item label="购买人手机号" prop="buyerPhone">
            <el-input v-model="outLiveStock.buyerPhone"></el-input>
          </el-form-item>
          <el-form-item label="检验证号" prop="quarantineNum">
            <el-input v-model="outLiveStock.quarantineNum"></el-input>
          </el-form-item>
          <el-form-item label="兽医" prop="vet">
            <el-input v-model="outLiveStock.vet"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="outLiveStock.remark"></el-input>
          </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: center;">
          <el-button type="primary" @click="sumbitOutLan">保存</el-button>
        </div>
      </el-dialog>
      <!-- 出栏记录 -->
       <el-dialog
        title="出栏记录"
        :visible.sync="isShowOutRecodeFrom"
        :show-close="true"
        :close-on-press-escape="true"
        :close-on-click-modal="false"
        width="50%">
        <el-form :inline="true" :model="outRecodefrom" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="outRecodefrom.kw" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSrearchOutPut">查询</el-button>
            <el-button @click="resetFormOutPut">重置</el-button>
          </el-form-item>
        </el-form>
          <el-table
          :data="getOutLiveList"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="buyer"
            label="购买人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="buyerPhone"
            label="购买人电话"
            width="110">
          </el-table-column>
          <el-table-column
            prop="livestockNum"
            label="编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="outUserName"
            label="操作人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="quarantineNum"
            label="检验证号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="100">
          </el-table-column>
          <el-table-column
            prop="vet"
            label="兽医"
            width="100">
          </el-table-column>
        </el-table>
        <pagination
          class="pagination_container"
          :total="paginationForOut.total"
          :page-sizes="[10, 20, 50, 100]"
          :page.sync="paginationForOut.page"
          :limit.sync="paginationForOut.pageSize"
          @pagination="changeStyRecord"
        />
      </el-dialog>
    </div>
    <pagination
      class="pagination_container"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      :page.sync="pagination.page"
      :limit.sync="pagination.pageSize"
      @pagination="getLiveStockList"
    />
  </div>
</template>

<script>
import { livestockTypeAllList } from '@/api/livestockType'
import { earTagAllList } from '@/api/earTag'
import { ranchRanchList } from '@/api/ranch'
import { penPenList } from '@/api/pen'
import { styStyList } from '@/api/sty'
import { upload } from '@/api/upLoadfile'
import {
  livestockAdd,
  livestockList,
  livestockDetail,
  livestockUpdate,
  livestockChangeRecord,
  livestockChange,
  livestockOut,
  livestockOutRecord
} from '@/api/livestock'
import Pagination from '@/components/pagination'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Pagination
  },
  data () {
    // 这里存放数据
    return {
      dialogVisibleFroImg: false,
      myDetailImg: '',
      checkList: ['编号', '性别', '出生日期', '图片'],
      isIndeterminate: true,
      checkAll: false,
      isShowList: [
        {
          isShow: false,
          label: '图片'
        },
        {
          isShow: false,
          label: '编号'
        },
        {
          isShow: false,
          label: '出生日期'
        },
        {
          isShow: false,
          label: '异常状态'
        },
        {
          isShow: false,
          label: '状态'
        },
        {
          isShow: false,
          label: '耳标名称'
        },
        {
          isShow: false,
          label: '性别'
        },
        {
          isShow: false,
          label: '品种'
        },
        {
          isShow: false,
          label: '栏舍'
        },
        {
          isShow: false,
          label: '圈棚'
        },
        {
          isShow: false,
          label: '牧场'
        }
      ],
      getMystockList: [],
      // 出栏
      paginationForOut: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      getOutLiveList: [],
      outRecodefrom: {
        kw: ''
      },
      isShowOutRecodeFrom: false,
      outPutLiveStock: false,
      outLiveStock: {
        buyer: '',
        buyerPhone: '',
        livestockId: '',
        quarantineNum: '',
        vet: '',
        remark: ''
      },
      outLiveStockRule: {
        buyer: [
          { required: true, trigger: 'blur', message: '请输入购买人' }
        ],
        buyerPhone: [
          { required: true, trigger: 'blur', message: '请输入购买人手机号' },
          {
            validator (_, value, callback) {
              const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
              if (!regTel.test(value)) {
                callback(new Error('手机号不符合规则'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        quarantineNum: [
          { required: true, trigger: 'blur', message: '请输入检验证号' }
        ],
        vet: [
          { required: true, trigger: 'blur', message: '请输入兽医' }
        ]
      },
      // 转栏
      getChangeRecode: [],
      changeRecodeQuery: {
        kw: ''
      },
      changeRecodeLan: false,
      addChangeFrom: { // 转栏
        newStyId: '',
        newStyIdArr: [],
        newRanchId: '',
        newRanchIdArr: [],
        newPenId: '',
        newPenIdArr: [],
        remark: '',
        livestockId: ''
      },
      addChangeRule: { // 转栏
        newRanchId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        newPenId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        newStyId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ]
      },
      addChangeLive: false,
      // 查询
      queryFromStock: {
        kw: '',
        ranchId: '',
        ranchIdArr: '',
        typeId: '',
        typeIdArr: '',
        penId: '',
        penIdArr: '',
        styId: '',
        styIdArr: '',
        status: ''
      },
      fileList: [],
      fileListDetail: [],
      formForAddLiveStock: { // 新增
        birthday: '',
        earTagId: '',
        earTagIdArr: [],
        penId: '',
        penIdArr: '',
        picRule: '',
        pic: '',
        ranchId: '',
        ranchIdArr: [],
        sex: '',
        sexArr: [
          {
            name: '公',
            id: 1
          },
          {
            name: '母',
            id: 2
          }
        ],
        remark: '',
        styId: '',
        styIdArr: [],
        typeId: '',
        typeIdArr: []
      },
      // 新增 rule 验证
      addLiveStockRule: {
        birthday: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        earTagId: [
          { required: true, trigger: 'change', message: '请选择耳标' }
        ],
        penId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        ranchId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        styId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ],
        sex: [
          { required: true, trigger: 'blur', message: '请输入年龄' }
        ],
        typeId: [
          { required: true, trigger: 'change', message: '请选择品种' }
        ],
        picRule: [
          { required: true, trigger: 'change', message: '请上传图片' }
        ]
      },
      isDisabled: true,
      updateLiveStockDetail: { // 修改
        birthday: '',
        earTagId: '',
        earTagIdArr: [],
        penId: '',
        penIdArr: '',
        picRule: '',
        pic: '',
        ranchId: '',
        ranchIdArr: [],
        sex: '',
        remark: '',
        styId: '',
        styIdArr: [],
        typeId: '',
        typeIdArr: []
      },
      updateDetailForStock: { // 修改
        birthday: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        earTagId: [
          { required: true, trigger: 'change', message: '请选择耳标' }
        ],
        penId: [
          { required: true, trigger: 'change', message: '请选择圈棚' }
        ],
        ranchId: [
          { required: true, trigger: 'change', message: '请选择牧场' }
        ],
        styId: [
          { required: true, trigger: 'change', message: '请选择栏舍' }
        ],
        sex: [
          { required: true, trigger: 'blur', message: '请输入年龄' }
        ],
        abnormal: [
          { required: true, trigger: 'change', message: '请选择异常状态' }
        ],
        status: [
          { required: true, trigger: 'change', message: '请选择状态' }
        ],
        typeId: [
          { required: true, trigger: 'change', message: '请选择品种' }
        ],
        picRule: [
          { required: true, trigger: 'change', message: '请上传图片' }
        ]
      },
      getMystock: [], // 牧场列表
      // 分页
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      paginationForChange: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      addCompany: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getLiveStockList()
    this.getEarTagList()
    this.getBreedList()
    this.getRanchList()
  },
  // 方法集合
  methods: {
    blowUpImg (val) {
      console.log(val)
      this.dialogVisibleFroImg = true
      this.myDetailImg = val
    },
    handleCheckAllChange (val) {
      if (this.checkList.length < 11) {
        const arr = []
        for (const item of this.isShowList) {
          arr.push(item.label)
        }
        this.checkList = arr
        this.checkAll = true
      } else {
        this.checkList = []
      }
    },
    handleCheckedCitiesChange (val) {
      console.log()
    },
    /**
    * 出栏
    */
    submitSrearchOutPut () {
      this.outStyStock()
    },
    resetFormOutPut () {
      this.outRecodefrom.kw = ''
    },
    outStyStock () {
      this.isShowOutRecodeFrom = true
      livestockOutRecord({
        kw: this.outRecodefrom.kw,
        limit: this.paginationForOut.pageSize,
        page: this.paginationForOut.page
      }).then(res => {
        this.getOutLiveList = res.data.records
        if (res.code === '200') {
          if (res.data.total > 0 && Math.ceil(res.data.total / this.paginationForChange.size) < this.paginationForChange.page) {
            this.paginationForChange.page = Math.ceil(res.data.total / this.paginationForChange.size)
            this.changeStyRecord()
          } else {
            this.paginationForChange.total = res.data.total
          }
        }
      })
    },
    sumbitOutLan () {
      this.$refs.fromForOutChange.validate((valid) => {
        if (valid) {
          const outObj = {
            buyer: this.outLiveStock.buyer,
            buyerPhone: this.outLiveStock.buyerPhone,
            livestockId: this.outLiveStock.livestockId,
            quarantineNum: this.outLiveStock.quarantineNum,
            remark: this.outLiveStock.remark,
            vet: this.outLiveStock.vet
          }
          livestockOut(outObj).then(res => {
            if (res.code === '200') {
              this.getLiveStockList()
              this.outPutLiveStock = false
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.outLiveStock = {
                buyer: '',
                buyerPhone: '',
                livestockId: '',
                quarantineNum: '',
                vet: '',
                remark: ''
              }
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }
      })
    },
    outLiveStockFun (val) {
      this.outLiveStock.livestockId = val
      this.outPutLiveStock = true
    },
    /**
    * resetFormChange 转栏
    * submitSrearchChange
    * sumbitChang
    * changeSty
    */
    resetFormChange () {
      this.changeRecodeQuery.kw = ''
    },
    submitSrearchChange () {
      this.changeStyRecord()
    },
    sumbitChang () {
      this.$refs.fromForAddChange.validate((valid) => {
        if (valid) {
          const resObj = {
            livestockId: this.addChangeFrom.livestockId,
            newPenId: this.addChangeFrom.newPenId,
            newRanchId: this.addChangeFrom.newRanchId,
            newStyId: this.addChangeFrom.newStyId,
            remark: this.addChangeFrom.remark
          }
          livestockChange(resObj).then(res => {
            if (res.code === '200') {
              this.addChangeLive = false
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }
      })
    },
    changeSty (val) {
      this.addChangeLive = true
      this.addChangeFrom.livestockId = val
      this.getRanchList()
    },
    changeStyRecord () {
      this.changeRecodeLan = true
      livestockChangeRecord({
        kw: this.changeRecodeQuery.kw,
        limit: this.paginationForChange.pageSize,
        page: this.paginationForChange.page
      }).then(res => {
        this.getChangeRecode = res.data.records
        if (res.code === '200') {
          if (res.data.total > 0 && Math.ceil(res.data.total / this.paginationForChange.size) < this.paginationForChange.page) {
            this.paginationForChange.page = Math.ceil(res.data.total / this.paginationForChange.size)
            this.changeStyRecord()
          } else {
            this.paginationForChange.total = res.data.total
          }
        }
      })
    },
    changeForRecodeRanch (val) {
      this.addChangeFrom.newPenId = ''
      this.addChangeFrom.newStyId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.addChangeFrom.newPenIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    changeForRecodePen (val) {
      this.addChangeFrom.newStyId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.addChangeFrom.newStyIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 转栏结束
    // 查询
    submitSrearch () {
      this.getLiveStockList()
    },
    // 重置
    resetForm () {
      this.queryFromStock.kw = ''
      this.queryFromStock.ranchId = ''
      this.queryFromStock.penId = ''
      this.queryFromStock.styId = ''
      this.queryFromStock.typeId = ''
    },
    // 获取耳标列表
    getEarTagList () {
      earTagAllList().then(res => {
        if (res.code === '200') {
          this.formForAddLiveStock.earTagIdArr = res.data
          this.updateLiveStockDetail.earTagIdArr = res.data
        }
      })
    },
    // 获取品种列表
    getBreedList () {
      livestockTypeAllList().then(res => {
        if (res.code === '200') {
          this.formForAddLiveStock.typeIdArr = res.data
          this.queryFromStock.typeIdArr = res.data
          this.updateLiveStockDetail.typeIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 获取牧场列表
    getRanchList () {
      ranchRanchList().then(res => {
        if (res.code === '200') {
          this.formForAddLiveStock.ranchIdArr = res.data
          this.queryFromStock.ranchIdArr = res.data
          this.updateLiveStockDetail.ranchIdArr = res.data
          this.addChangeFrom.newRanchIdArr = res.data
        }
      })
    },
    // 获取圈棚列表
    changeRanchGetPen (val) {
      this.formForAddLiveStock.penId = ''
      this.formForAddLiveStock.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.formForAddLiveStock.penIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 获取圈棚列表 for 查询
    changeRanchGetPenForQuery (val) {
      this.queryFromStock.penId = ''
      this.queryFromStock.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.queryFromStock.penIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 获取栏舍列表
    changeRanchGetSty (val) {
      this.formForAddLiveStock.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.formForAddLiveStock.styIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 获取栏舍列表 for 查询
    changeRanchGetStyForQuery (val) {
      this.queryFromStock.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.queryFromStock.styIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 详情 获取 圈棚 默认列表
    getDefaultPenList (val) {
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.updateLiveStockDetail.penIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    // 详情 获取 栏舍 默认列表
    getDefaultStyList (val) {
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.updateLiveStockDetail.styIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    changeForDetail (val) {
      this.updateLiveStockDetail.penId = ''
      this.updateLiveStockDetail.styId = ''
      penPenList(val).then(res => {
        if (res.code === '200') {
          this.updateLiveStockDetail.penIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    changeForDetailInPen (val) {
      this.updateLiveStockDetail.styId = ''
      styStyList(val).then(res => {
        if (res.code === '200') {
          this.updateLiveStockDetail.styIdArr = res.data
          this.$forceUpdate()
        }
      })
    },
    changeUploadImgFun (item) {
      upload(item.file).then(res => {
        if (res.code === '200') {
          this.updateLiveStockDetail.pic = res.data
          this.handlePreview(res)
        }
      })
    },
    changeHandlePreview () {
      this.updateDetailForStock.picRule = []
      this.$message.success('上传成功')
      this.$forceUpdate()
    },
    ChangeHandleRemove () {
      this.valiIconFlag = false
      this.addLiveStockRule.picRule = [
        { required: true, trigger: 'change', message: '请上传图片' }
      ]
    },
    // 删除上传的图片
    handleRemove (file, fileList) {
      this.valiIconFlag = false
      this.addLiveStockRule.picRule = [
        { required: true, trigger: 'change', message: '请上传图片' }
      ]
    },
    // 图片上传成功
    handlePreview (response, file, fileList) {
      this.addLiveStockRule.picRule = []
      this.$message.success('上传成功')
      this.$forceUpdate()
    },
    // 上传图片接口
    uploadImgFun (item) {
      upload(item.file).then(res => {
        if (res.code === '200') {
          this.formForAddLiveStock.pic = res.data
          this.handlePreview(res)
        }
      })
    },
    // 打开新增弹框
    addPenInPage () {
      this.addCompany = true
      this.getEarTagList()
      this.getBreedList()
      this.getRanchList()
    },
    // 新增保存
    addMyNewCompany () {
      this.$refs.fromForStockAdd.validate((valid) => {
        if (valid) {
          this.formForAddLiveStock.birthday = new Date(this.formForAddLiveStock.birthday).getTime()
          const livestockObj = {
            birthday: this.formForAddLiveStock.birthday,
            earTagId: this.formForAddLiveStock.earTagId,
            penId: this.formForAddLiveStock.penId,
            pic: this.formForAddLiveStock.pic,
            ranchId: this.formForAddLiveStock.ranchId,
            remark: this.formForAddLiveStock.remark,
            sex: this.formForAddLiveStock.sex,
            styId: this.formForAddLiveStock.styId,
            typeId: this.formForAddLiveStock.typeId
          }
          livestockAdd(livestockObj).then(res => {
            this.addCompany = false
            if (res.code === '200') {
              this.getLiveStockList()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.fileListDetail = []
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 关闭新增
    // beforeClose (done) {
    //   console.log(done)
    // },
    // 获取列表
    getLiveStockList () {
      livestockList({
        kw: this.queryFromStock.kw,
        ranchId: this.queryFromStock.ranchId,
        typeId: this.queryFromStock.typeId,
        penId: this.queryFromStock.penId,
        styId: this.queryFromStock.styId,
        limit: this.pagination.pageSize,
        page: this.pagination.page,
        status: this.queryFromStock.status
      }).then(res => {
        if (res.code === '200') {
          this.getMystock = res.data.records
          // for (const item of res.data.records) {
          //   const obj = {}
          //   obj.num = item.num
          //   obj.sex = item.sex === 1 ? '公' : '母'
          //   obj.birthday = this.timestampToDate(item.birthday)
          //   obj.abnormal = item.abnormal === 0 ? '正常' : '异常'
          //   obj.status = item.status === 0 ? '未在栏' : '在栏'
          //   obj.ranchName = item.ranchName
          //   obj.penName = item.penName
          //   obj.styName = item.styName
          //   obj.typeName = item.typeName
          //   obj.tagNum = item.tagNum
          //   obj.pic = item.pic
          //   obj.isShow = false
          //   this.getMystockList.push(obj)
          // }
          // console.log(this.getMystockList)
          if (res.data.total > 0 && Math.ceil(res.data.total / this.pagination.size) < this.pagination.page) {
            this.pagination.page = Math.ceil(res.data.total / this.pagination.size)
            this.getLiveStockList()
          } else {
            this.pagination.total = res.data.total
          }
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 删除
    deletLiveStockDUser (val) {
      // this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //     center: true
      //   }).then(() => {
      //     companyDelete(val).then(res => {
      //       if (res.code === '200') {
      //         this.$message({
      //           message: '删除成功',
      //           type: 'success'
      //         })
      //         this.getLiveStockList()
      //       } else {
      //         this.$message({
      //           type: 'info',
      //           message: res,message
      //         });
      //       }
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     });
      //   });
    },
    // 详情
    getLiveStockDetail (val) {
      this.dialogVisible = true
      livestockDetail(val).then(res => {
        this.updateLiveStockDetail = res.data
        if (this.updateLiveStockDetail.pic !== null || this.updateLiveStockDetail.pic !== undefined) {
          this.updateDetailForStock.picRule = []
        }
        this.fileListDetail.push({ url: this.updateLiveStockDetail.pic })
        this.getDefaultPenList(this.updateLiveStockDetail.ranchId)
        this.getDefaultStyList(this.updateLiveStockDetail.penId)
        this.getEarTagList()
        this.getBreedList()
        this.getRanchList()
        this.updateLiveStockDetail.sexArr = [{ name: '公', id: 1 }, { name: '母', id: 2 }]
        this.updateLiveStockDetail.statusArr = [{ name: '未在栏', id: 0 }, { name: '在栏', id: 1 }]
        this.updateLiveStockDetail.abnormalArr = [{ name: '正常', id: 0 }, { name: '异常', id: 1 }]
      })
    },
    // 修改详情
    setConfigUserRole () {
      this.$confirm('是否确认修改牲畜信息', ' 提示', {
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        this.isDisabled = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    },
    // 保存修改后信息
    submitConfigUser () {
      this.$refs.deatilsFrom.validate((valid) => {
        if (valid) {
          const livestockObj = {
            abnormal: this.updateLiveStockDetail.abnormal,
            birthday: new Date(this.updateLiveStockDetail.birthday).getTime(),
            earTagId: this.updateLiveStockDetail.earTagId,
            livestockId: this.updateLiveStockDetail.id,
            penId: this.updateLiveStockDetail.penId,
            pic: this.updateLiveStockDetail.pic,
            ranchId: this.updateLiveStockDetail.ranchId,
            remark: this.updateLiveStockDetail.remark,
            sex: this.updateLiveStockDetail.sex,
            status: this.updateLiveStockDetail.status,
            styId: this.updateLiveStockDetail.styId,
            typeId: this.updateLiveStockDetail.typeId
          }
          livestockUpdate(livestockObj).then(res => {
            if (res.code === '200') {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.fileListDetail = []
              this.isDisabled = true
              this.getLiveStockList()
            } else {
              this.$message({
                type: 'info',
                message: res.message
              })
            }
          })
        }
      })
    },
    // 关闭新增弹框
    closeDia () {
      this.formForAddLiveStock = {}
    },
    // 关闭详情弹框
    closeDiaDetail () {
      this.dialogVisible = false
      this.isDisabled = true
      this.fileListDetail = []
    }
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.authority {
  width: 100%;
  height: 100%;
}
.fir {
  width: auto;
  height: 30px;
  line-height: 30px;
  span {
    margin-left: 10px;
    padding: 5px;
    width: 30%;
  }
}
.sen {
  margin: 5px auto;
  width: 80%;
  padding: 10px;
  border: 1px solid #f0f0f0;
}
.buttons {
  width: 100%;
  text-align: center;
}
</style>
